<template>
  <div class="all">
    <!-- 标题面包屑 -->
    <div class="tit">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品分类</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="box">
      <el-button type="primary" @click="open" class="al">添加商品分类</el-button>
      <!-- 表格 -->
      <div class="ta">
        <template>
          <div id="example">
            <zk-table
              ref="table"
              index-text="#"
              :data="data"
              :columns="columns"
              :stripe="props.stripe"
              :border="props.border"
              :show-header="props.showHeader"
              :show-summary="props.showSummary"
              :show-row-hover="props.showRowHover"
              :show-index="props.showIndex"
              :tree-type="props.treeType"
              :is-fold="props.isFold"
              :expand-type="props.expandType"
              :selection-type="props.selectionType"
            >
           
            
            <template slot="sex" scope="scope" slot-scope="scope">
                <el-button type="success" icon="el-icon-check" circle size="mini"></el-button>    
             </template>
             <template slot="score" scope="scope" slot-scope="scope">
                  <el-button type="primary" plain size="mini">一级</el-button>  
            </template>
             
              <template slot="likes" scope="scope" slot-scope="scope">
                <el-button
                      size="mini"
                      @click="open1"
                      type="primary"
                      >编辑</el-button
                    >
                    <el-button
                      size="mini"
                      type="danger"
                      @click="handleDelete(scope.$index, scope.row)"
                      >删除</el-button
                    >        
              </template>
            </zk-table>
          </div>
        </template>
      </div>

      <!-- // 分类页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[5, 10, 15, 20, 25]"
          :page-size="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="25"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import ElementUI from "element-ui";
export default {
  data() {
    return {
      props: {
        stripe: false, // 是否显示间隔斑马纹
        border: true, // 是否显示纵向边框
        showHeader: true, // 是否显示表头
        showSummary: false, // 是否显示表尾合计行
        showRowHover: true, // 鼠标悬停时，是否高亮当前行
        showIndex: true, // 是否显示数据索引
        treeType: true, // 是否为树形表格
        isFold: true, // 树形表格中父级是否默认折叠
        expandType: false, // 是否为展开行类型表格（为 True 时，需要添加名称为 '$expand' 的作用域插槽, 它可以获取到 row, rowIndex)
        selectionType: false, // 是否为多选类型表格
      },
      data: [
        {
          name: "智能设备",
          score:"一级",
          children: [
            {
              name: "智能酷玩",
               score:"二级",             
              children: [
                {
                  name: "智能手环",
                   score:"三级",
                },
                {
                  name: "VR眼镜",
                  score:"三级",
                
                },
                {
                  name: "智能手表",
                  score:"三级",
                
                },
              ],
            },
            {
              name: "潮流数码",
               score:"二级",             
              children: [
                {
                  name: "智能手环",
                   score:"三级",
                },
                {
                  name: "VR眼镜",
                  score:"三级",
                
                },
                {
                  name: "智能手表",
                  score:"三级",
                
                },
              ],
            },
            {
              name: "智能家居",
               score:"二级",             
              children: [
                {
                  name: "智能手环",
                   score:"三级",
                },
                {
                  name: "VR眼镜",
                  score:"三级",
                
                },
                {
                  name: "智能手表",
                  score:"三级",
                
                },
              ],
            },
            {
              name: "电子教育",
               score:"二级",             
              children: [
                {
                  name: "智能手环",
                   score:"三级",
                },
                {
                  name: "VR眼镜",
                  score:"三级",
                
                },
                {
                  name: "智能手表",
                  score:"三级",
                
                },
              ],
            },
          ],
        },
        {
          name: "钟表眼镜",
          score:"一级",
          children: [
            {
              name: "智能酷玩",
               score:"二级",             
              children: [
                {
                  name: "智能手环",
                   score:"三级",
                },
                {
                  name: "VR眼镜",
                  score:"三级",
                
                },
                {
                  name: "智能手表",
                  score:"三级",
                
                },
              ],
            },
            {
              name: "潮流数码",
               score:"二级",             
              children: [
                {
                  name: "智能手环",
                   score:"三级",
                },
                {
                  name: "VR眼镜",
                  score:"三级",
                
                },
                {
                  name: "智能手表",
                  score:"三级",
                
                },
              ],
            },
            {
              name: "智能家居",
               score:"二级",             
              children: [
                {
                  name: "智能手环",
                   score:"三级",
                },
                {
                  name: "VR眼镜",
                  score:"三级",
                
                },
                {
                  name: "智能手表",
                  score:"三级",
                
                },
              ],
            },
            {
              name: "电子教育",
               score:"二级",             
              children: [
                {
                  name: "智能手环",
                   score:"三级",
                },
                {
                  name: "VR眼镜",
                  score:"三级",
                
                },
                {
                  name: "智能手表",
                  score:"三级",
                
                },
              ],
            },
          ],
        },
        {
          name: "家具箱包",
          score:"一级",
          children: [
            {
              name: "智能酷玩",
               score:"二级",             
              children: [
                {
                  name: "智能手环",
                   score:"三级",
                },
                {
                  name: "VR眼镜",
                  score:"三级",
                
                },
                {
                  name: "智能手表",
                  score:"三级",
                
                },
              ],
            },
            {
              name: "潮流数码",
               score:"二级",             
              children: [
                {
                  name: "智能手环",
                   score:"三级",
                },
                {
                  name: "VR眼镜",
                  score:"三级",
                
                },
                {
                  name: "智能手表",
                  score:"三级",
                
                },
              ],
            },
            {
              name: "智能家居",
               score:"二级",             
              children: [
                {
                  name: "智能手环",
                   score:"三级",
                },
                {
                  name: "VR眼镜",
                  score:"三级",
                
                },
                {
                  name: "智能手表",
                  score:"三级",
                
                },
              ],
            },
            {
              name: "电子教育",
               score:"二级",             
              children: [
                {
                  name: "智能手环",
                   score:"三级",
                },
                {
                  name: "VR眼镜",
                  score:"三级",
                
                },
                {
                  name: "智能手表",
                  score:"三级",
                
                },
              ],
            },
          ],
        },
        {
          name: "邮币乐器",
          score:"一级",
          children: [
            {
              name: "智能酷玩",
               score:"二级",             
              children: [
                {
                  name: "智能手环",
                   score:"三级",
                },
                {
                  name: "VR眼镜",
                  score:"三级",
                
                },
                {
                  name: "智能手表",
                  score:"三级",
                
                },
              ],
            },
            {
              name: "潮流数码",
               score:"二级",             
              children: [
                {
                  name: "智能手环",
                   score:"三级",
                },
                {
                  name: "VR眼镜",
                  score:"三级",
                
                },
                {
                  name: "智能手表",
                  score:"三级",
                
                },
              ],
            },
            {
              name: "智能家居",
               score:"二级",             
              children: [
                {
                  name: "智能手环",
                   score:"三级",
                },
                {
                  name: "VR眼镜",
                  score:"三级",
                
                },
                {
                  name: "智能手表",
                  score:"三级",
                
                },
              ],
            },
            {
              name: "电子教育",
               score:"二级",             
              children: [
                {
                  name: "智能手环",
                   score:"三级",
                },
                {
                  name: "VR眼镜",
                  score:"三级",
                
                },
                {
                  name: "智能手表",
                  score:"三级",
                
                },
              ],
            },
          ],
        },
        {
          name: "其他",
          score:"一级",
          children: [
            {
              name: "智能酷玩",
               score:"二级",             
              children: [
                {
                  name: "智能手环",
                   score:"三级",
                },
                {
                  name: "VR眼镜",
                  score:"三级",
                
                },
                {
                  name: "智能手表",
                  score:"三级",
                
                },
              ],
            },
            {
              name: "潮流数码",
               score:"二级",             
              children: [
                {
                  name: "智能手环",
                   score:"三级",
                },
                {
                  name: "VR眼镜",
                  score:"三级",
                
                },
                {
                  name: "智能手表",
                  score:"三级",
                
                },
              ],
            },
            {
              name: "智能家居",
               score:"二级",             
              children: [
                {
                  name: "智能手环",
                   score:"三级",
                },
                {
                  name: "VR眼镜",
                  score:"三级",
                
                },
                {
                  name: "智能手表",
                  score:"三级",
                
                },
              ],
            },
            {
              name: "电子教育",
               score:"二级",             
              children: [
                {
                  name: "智能手环",
                   score:"三级",
                },
                {
                  name: "VR眼镜",
                  score:"三级",
                
                },
                {
                  name: "智能手表",
                  score:"三级",
                
                },
              ],
            },
          ],
        },
      ],
      columns: [
        {
          label: "分类名称", // 列标题名称
          prop: "name", // 对应列内容的属性名
          width: "400px", // 列宽度
        },
        {
          label: "是否有效",
          prop: "sex",
          minWidth: "50px",
          type: "template",
          template: "sex",
        },
        {
          label: "排序",
          prop: "score",
          minWidth: "170px",
          type: "template",
          template: "score",
        },
        {
          label: "操作",
          prop: "likes",
          minWidth: "200px",
          type: "template",
          template: "likes", // 列类型为 'template'(自定义列模板) 时，对应的作用域插槽（它可以获取到 row, rowIndex, column, columnIndex）名称
        },
      ],
    };
  },
  methods: {
    //页数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    //添加分类
    open() {
      const h = this.$createElement;
      this.$msgbox({
        title: "添加分类",
        message: h("p", null, [
          h("i", { style: "color: red" }, "* "),
          h("span", null, "分类名称 "),
          h("input", { style: "color: teal" }),
          // h('/br'),
          h("p", null),
          h("i", { style: "color: white" }, "* "),
          h("span", null, "父级分类 "),
          h("select", { style: "width:170px" }),
        ]),
        showCancelButton: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = "执行中...";
            setTimeout(() => {
              done();
              setTimeout(() => {
                instance.confirmButtonLoading = false;
              }, 300);
            }, 3000);
          } else {
            done();
          }
        },
      }).then((action) => {
        this.$message({
          type: "info",
          message: "action: " + action,
        });
      });
    },
    open1() {
      const h = this.$createElement;
      this.$msgbox({
        title: "添加分类",
        message: h("p", null, [
          h("i", { style: "color: red" }, "* "),
          h("span", null, "分类名称 "),
          h("input", { style: "color: teal; width:50px"})
        ]),
        showCancelButton: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = "执行中...";
            setTimeout(() => {
              done();
              setTimeout(() => {
                instance.confirmButtonLoading = false;
              }, 300);
            }, 3000);
          } else {
            done();
          }
        },
      }).then((action) => {
        this.$message({
          type: "info",
          message: "action: " + action,
        });
      });
    },
  },
};
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
}
#example {
  width: 100%;
}
.switch-list {
  margin: 20px 0;
  list-style: none;
  overflow: hidden;
}
.switch-item {
  margin: 20px;
  float: left;
}
.el-message-box {
  width: 900px;
  // height: 300px;
  margin-top: -200px;
  margin-left: 60px;
}
.tit {
  color: rgb(78, 74, 74);
  font-size: 14px;
  padding: 10px 20px;
}
.box {
  padding: 20px 20px;
  width: 1500px;
  height: 400px;
  border: 1px solid #ccc;
  margin-left: 14px;
  box-shadow: 0px 0px 7px #ccc;
}
</style>
